var bannerImg = document.querySelector('.banner-img')
var liImgs = document.querySelectorAll('.banner-img li')
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var indicators = document.querySelectorAll('.indicator li');
console.log(indicators);
var bannerContent = document.querySelector('.banner-content');
var index = 0;
var timer = null;
// 显示上一张图片
function prevImage(){
    index = index == 0 ? liImgs.length - 1 : index -=1;
    showImg();
}

// 显示下一张图片
function nextImage(){
    index = index == liImgs.length - 1 ? 0 : index +=1;
    // console.log(index);
        showImg();
}

// 显示图片
function showImg(){
    for(var i = 0; i<liImgs.length;i++ ){
        liImgs[i].className = '';
        indicators[i].className = '';
    }   
    // console.log(index);
        liImgs[index].className = 'active';
        indicators[index].className = 'current';
        moveLine();

}

var timer = setInterval(nextImage,1000);

// 当鼠标放上banner-content进行停止
bannerContent.onmouseover = function(){
    clearInterval(timer);
    timer = null;
}
bannerContent.onmouseout = function(){
    if(timer != null){
        return;
    }
    timer = setInterval(nextImage,1000);
}

//当鼠标放在指示灯上面的时进行显示当前的图片

for(var i = 0; i< indicators.length;i++){
    indicators[i].index = i;
    indicators[i].onmouseover = function(){
        index = this.index
        showImg();
    }
}

// 点击下一张切换
next.onclick = function(){
    nextImage();
}
prev.onclick = function(){
    prevImage();
}

// 设置下面的线移动
function moveLine(){
    var line = document.querySelector('.indicator .line');
    var left = 229*index;
    console.log(index);
    line.style.left = 250 + left + 'px';
}


